<template>
	<view class="openLiveList">
		<navBar title="申请记录" bg="#FFF"></navBar>
		<view class="list flex_center" v-for="(item,index) in list" :key="index">
			<view class="left">
				<image :src="item.cover_img" mode="aspectFill"></image>
			</view>
			
			<view class="right">
				<view class="name flex_r_between">
					<view class="nickname hidden">房间昵称:{{item.room_name}}</view>
					<view class="status" :id="item.status == 2 ? 'success' : ''">
						{{item.status == 1 ? '申请中': item.status == 2 ? '开厅成功' : '开厅失败'}}
					</view>
				</view>
				<view class="name flex_center">
					<view class="nickname hidden">厅管昵称:{{item.owner_name}}</view>
				</view>
				<view class="mobile">手机号码:{{item.owner_mobile}}</view>
				<!-- <view class="scale">厅规模:{{item.sala_scale}}人</view> -->
				<view class="time">申请时间:<uni-dateformat :date="item.apply_time * 1000"
						format="yyyy-MM-dd hh:mm"></uni-dateformat></view>
			</view>
		</view>

		<empty v-if="list.length == 0 && total == 0"></empty>
		<loading v-if="list.length == 0 && total == 1"></loading>

	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	import empty from '@/compentents/empty/empty.vue';
	import loading from '@/pages/guild/components/loading/loading.vue';
	export default {
		components: {
			empty,
			navBar,
			loading
		},
		data() {
			return {
				list: [],
				total: 1,
				page: 1,

				guild_id: 0,
				circle_id: 0,
			}
		},
		methods: {
			getList() {
				this.$get('/guild/getOpenList', {
					guild_id: this.guild_id,
					page: this.page,
					circle_id: this.circle_id,
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},
		},

		onLoad(option) {
			if (option.guild_id) {
				this.guild_id = option.guild_id;
				this.circle_id = option.circle_id;
				this.getList();
			}
		},
		onReachBottom() {
			if(this.list.length < this.total){
				this.page++;
				this.getList()
			}
		},
		
		onPullDownRefresh() {
			this.list = [];
			this.page = 1;
			this.total = 1;
			this.$get('/guild/getOpenList', {
				guild_id: this.guild_id,
				page: this.page,
				circle_id: this.circle_id,
			}).then(res => {
				uni.stopPullDownRefresh();
				this.total = res.data.total;
				this.list.push(...res.data.data);
			})
		},
	}
</script>

<style lang="less" scoped>
	.openLiveList {
		padding: 32rpx;
	}

	.list {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 24rpx 16rpx;
		margin-bottom: 20rpx;
		
		overflow: hidden;
		
		.left {
			width: 176rpx;
			height: 176rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			overflow: hidden;
			margin-right: 16rpx;
			image {
				width: 176rpx;
				height: 176rpx;
			}
		}
		
		.right {
			flex: 1;
			overflow: hidden;
		}

		.name {
			.nickname {
				flex: 1;
			}
		}

		view {
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 6rpx;
		}

		.status {
			background: #FFEAEE;
			border-radius: 16rpx;
			font-size: 24rpx;
			color: #FD2A53;
			padding: 2rpx 12rpx;
		}
		
		#success {
			background: #E5FFE9;
			color: #10A927;
		}
	}
</style>